<template>
	<view class="page">
		<u-navbar title="立即提现" title-color="#000000" back-icon-color="#000000" :background="background"></u-navbar>
		<view class="top">
			<view class="money-ke flex-row items-center">
				<view class="money-ke-lf flex-row items-center justify-center">
					<image class="shrink-0 money-ke-lf-img mt-8"
						src="https://terminator.axu9.com/images/huoke-balance-icon2.png" />
				</view>
				<view class="money-ke-rg flex-row flex-1 items-center">
					<text class="money-ke-rg-text mr-20">可提现金额</text>
					<text class="money-ke-rg-text">{{balance}}元</text>
				</view>
			</view>
			<view class="money-ke flex-row items-center">
				<view class="money-ke-lf flex-row items-center justify-center">
					<image class="shrink-0 money-ke-lf-img1 mt-8"
						src="https://terminator.axu9.com/images/huoke-balance-icon1.png" />
				</view>
				<view class="money-ke-rg flex-row flex-1 items-center">
					<input type="text" class="input-class" v-model="money" placeholder="提现金额" />
				</view>
			</view>
		</view>
		<view @click="toWithdrawal" class="withdraw-btn" v-if="!isLoadding">
			立即提现
		</view>
		<view class="withdraw-btn" v-if="isLoadding">
			立即提现
		</view>
		<view @click="withdrawRecord" class="flex-row justify-center withdraw-recard-text">
			提现记录
		</view>
		<view class="content flex-col items-center">
			<view class="list-title">
				佣金明细
			</view>
			<view class="list flex-col items-center">
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class=" flex-col">
						<view class="list-top flex-row justify-between">
							<view class="list-top-lf flex-row flex-1" v-if="item.type == 1">
								<!-- 音色提成 -->
								{{item.user ? item.user.nickName : ''}}
								
								<!-- {{item.user ? item.user.mobile : ''}} -->
							</view>
							<view class="list-top-lf flex-row flex-1" v-if="item.type == 2">
								用户提现
							</view>
							<view class="list-top-lf flex-row flex-1" v-if="item.type == 3">
								提现驳回
							</view>
							<view class="list-top-rg">
								{{item.time}}
							</view>
						</view>
						<image class="line" src="https://terminator.axu9.com/images/huoke-line-img.png" mode=""></image>
						<view class="list-bottom flex-row justify-between">
							<view class="list-top-lf flex-row items-center flex-1">
								<image class="shrink-0 lf-img"
									src="https://terminator.axu9.com/images/huoke-balance-icon1.png" />
									
								<!-- <text class="list-bottom-text ml-7">{{item.type == 1 ? '用户充值' :  '提现'}}{{item.type == 1 ? '+' :  '-'}}{{item.num}}</text> -->
								<text class="list-bottom-text ml-7" v-if="item.type == 1">用户充值+{{item.num}}</text>
								<text class="list-bottom-text ml-7" v-if="item.type == 2">提现-{{item.num}}</text>
								<text class="list-bottom-text ml-7" v-if="item.type == 3">提现驳回+{{item.num}}</text>
							</view>
							<!-- <view class="list-bottom-rg flex-row flex-1 justify-end">
								剩余积分60
							</view> -->
							<!-- <view v-if="item.type == 0" class="tixian-ing flex-row flex-1 justify-end">
								提现中
							</view>
							<view v-if="item.type == 1" class="tixian-ed flex-row flex-1 justify-end">
								已完成
							</view>
							<view v-if="item.type == 2" class="tixian-fail flex-row flex-1 justify-end">
								失败
							</view> -->
						</view>
										
					</view>
					<!-- <view class=" flex-col" v-if="item.type == 1">
						<view class="list-top flex-row justify-between">
							<view class="list-top-rg">
								{{item.time}}
							</view>
						</view>
						<image class="line" src="https://terminator.axu9.com/images/huoke-line-img.png" mode=""></image>
						<view class="list-bottom flex-row justify-between">
							<view class="list-top-lf flex-row items-center flex-1">
								<image class="shrink-0 lf-img"
									src="https://terminator.axu9.com/images/huoke-balance-icon1.png" />
								<text class="list-bottom-text ml-7">音色提成+{{item.num}}</text>
							</view>
						</view>
										
					</view> -->
				
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import {
		getUserinfo,
		withdrawalLog,
		withdrawal
	} from "@/api/user.js"
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				balance: 0,//余额
				list: [],//佣金列表
				money: '',//提现金额
				isLoadding: false,
				commonData: {}
			}
		},
		onLoad() {
			this.commonData = commonData;
			this.getUserinfo();
			this.getWithdrawalLog();
		},
		methods: {
			// 提现
			tixian(){
				if(this.isLoadding){
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				this.isLoadding = true;
				withdrawal({
					uid: uni.getStorageSync("userId"),
					money: this.money
				}).then(res => {
					
					if(res.errno == 0){
						uni.showToast({
							title: '提现成功',
							icon: 'none'
						})
						setTimeout(()=>{
							this.isLoadding = false
							uni.redirectTo({
								url: '/pagesMine/purchaser/index'
							})
						},1000)
						
					}else {
						this.isLoadding = false
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res=>{
					this.isLoadding = false
					uni.showToast({
						title: '提现失败',
						icon: 'none'
					})
				})
			},
			// 提现记录
			withdrawRecord(){
				uni.navigateTo({
					url: '/pagesMine/withdrawRecord/index'
				})
			},
			// 提现按钮
			toWithdrawal(){
				if(this.money == ''){
					uni.showToast({
						title: '提现金额不能空',
						icon: 'none'
					})
					return
				}
				if(this.money < 1){
					uni.showToast({
						title: '提现金额不能小于1元',
						icon: 'none'
					})
					return
				}
				// this.isLoadding = true
				// this.tixian()
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定提现么？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.tixian();
						} else if (res.cancel) {
							console.log('用户点击取消');
							_this.isLoadding = false;
						}
					}
				})
				
			},
			// 获取提现记录
			getWithdrawalLog(){
				withdrawalLog({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					if(res.errno == 0){
						this.list = res.data;
					}
				})
			},
			// 获取用户信息
			getUserinfo() {
				getUserinfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res.data, 'getUserinfo')
					this.balance = res.data.balance;
				}).catch(err => {
			
				})
			},
		}
	}
</script>

<style>
	@import url(../../static/css/common.css);

	page {
		width: 100%;
		background-image: linear-gradient(-181deg, #d6f4ed, #ebfaf6);
		background-size: 100% 430rpx;
		background-repeat: no-repeat;
		background-color: #f5f5f5;
	}


	.content {
		padding-bottom: 40rpx;
	}

	.list-title {
		width: 690rpx;
		color: #111111;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding-left: 25rpx;
		position: relative;
	}

	.list-title::before {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		content: "";
		width: 6rpx;
		height: 36rpx;
		border-radius: 3rpx;
		background: #00bf90;
	}

	.line {
		width: 100%;
		height: 2rpx;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
	}

	.top {
		width: 690rpx;
		height: 303rpx;
		border-radius: 12rpx;
		background: #ffffff;
		margin: 0 auto;
		padding: 29rpx 68rpx 59rpx 36rpx;
	}

	.money-ke {
		height: 118rpx;
		/* line-height: 118rpx; */
	}

	.mt-8 {
		margin-top: 8rpx;
	}

	.money-ke-rg {
		width: 100%;
		height: 100%;
		border-bottom: 1rpx solid #dddfe3;
	}

	.money-ke-rg-text {
		color: #000000;
		font-weight: 500;
		font-face: PingFang SC;
		font-size: 30rpx;
	}
	.mr-20{
		margin-right: 20rpx;
	}

	.input-class {
		width: 100%;
		color: #000000;
		font-weight: 500;
		font-face: PingFang SC;
		font-size: 30rpx;
	}
	.placeholder-class{
		font-weight: 500;
		font-size: 30rpx;
		color: #98A0A9;
	}

	.money-ke-lf-img {
		width: 38rpx;
		height: 32rpx;
		margin-right: 17rpx;
	}

	.money-ke-lf-img1 {
		width: 37rpx;
		height: 36rpx;
		margin-right: 17rpx;
	}

	.withdraw-btn {
		width: 670rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #00ccbb, #00e586);
		box-shadow: 0 22rpx 50rpx 0 #00bf903b;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 27rpx;
		/* margin-bottom: 52rpx; */
		margin-bottom: 27rpx;
	}
	.withdraw-recard-text{
		font-weight: 500;
		font-size: 26rpx;
		color: #98A0A9;
		margin-bottom: 52rpx;
	}

	.list-item {
		width: 690rpx;
		padding: 26rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-top: 23rpx;
	}

	.lf-img {
		width: 37rpx;
		height: 36rpx;
		margin-right: 17rpx;
		margin-top: 8rpx;
	}
	.list-top-lf {
		font-weight: 500;
		font-size: 30rpx;
		color: #666666;
	}
	.list-top-rg {
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
	}
	.list-bottom-text {
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
		max-width: 90%;
	}
	.list-bottom-rg {
		font-weight: 400;
		font-size: 28rpx;
		color: #00BF90;
		width: 100%;
		word-break: break-all;
	}
	.list-bottom-rg-mobile {
		font-weight: 500;
		font-size: 30rpx;
		color: #666666;
	}
	.tixian-ing {
		font-weight: 500;
		font-size: 30rpx;
		color: #00BF90;
	}
	.tixian-ed {
		font-weight: 500;
		font-size: 30rpx;
		color: #FF9908;
	}
	.tixian-fail {
		font-weight: 500;
		font-size: 30rpx;
		color: #da4800;
	}
</style>